<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信支付Demo</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>


        function onBridgeReady() {
            var param = {
                totalFee: "1"
            };

            $.ajax({
                url: "/pay/query",
                data: param,
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                async: false,//设置为同步传输
                type: "get",
                success: function (data) {


                    var appId = data.appid;
                    var timestamp = data.timestamp;
                    var nonceStr = data.nonceStr;
                    var paySign = data.paySign;
                    var packageValue = data.package;
                    var signature = data.signature;
                    console.log("1111111");
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: appId, // 必填，公众号的唯一标识
                        timestamp: timestamp, // 必填，生成签名的时间戳
                        nonceStr: nonceStr, // 必填，生成签名的随机串
                        signature: signature,// 必填，签名，见附录1
                        jsApiList: [
                            'chooseWXPay'
                        ],// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                        success: function (res) {
                            console.log(res);
                            // 以键值对的形式返回，可用的api值true，不可用为false
                            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                        }
                    });
                    console.log("2222");

                    /* WeixinJSBridge.invoke('getBrandWCPayRequest', {
                         "appId": appId,     //公众号名称，由商户传入
                         "timeStamp": timestamp,         //时间戳，自1970年以来的秒数
                         "nonceStr": nonceStr, //随机串
                         "package": packageValue,
                         "signType": "MD5",         //微信签名方式：
                         "paySign": paySign //微信签名
                     }, function (res) {
                         if (res.err_msg == "get_brand_wcpay_request:ok") {
                             alert("222");
                         }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                     });*/

                    console.log("33333333");
                    wx.chooseWXPay({
                        timestamp: timestamp,
                        nonceStr: nonceStr,
                        package: packageValue,
                        signType: "MD5",
                        paySign: paySign,
                        trigger: function (res) {

                        },
                        complete: function (res) {

                        },
                        success: function (res) {
                            alert('支付成功');
                            window.location.href = "success.html";
                        },
                        cancel: function (res) {
                            alert('支付已取消');
                        },
                        fail: function (res) {
                            alert(JSON.stringify(res));
                            alert('支付失败');
                        }
                    });

                    console.log("4444444444");

                }

            });
        }


        function pay() {
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                onBridgeReady();
            }
        }

    </script>
    <link href="bootstrap-4.0.0/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>

<h3>微信支付Demo</h3>
<a>支付按钮</a>

<a id="pay" class="btn-info" onclick="pay()">提交</a>

</body>
</html>